<template>
  <div ref="chart" style="width:100%;height:100%;" />
</template>

<script>
import * as echarts from 'echarts'
import { cloneDeep, groupBy } from 'lodash'
export default {
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      chartData: [],
      times: [],
      deptNames: [],
      timeer: null
    }
  },
  watch: {
    data: {
      handler: 'updateChart',
      immediate: true
    }
  },
  mounted() {
    this.initChart()
    this.timeer = setInterval(this.resizeChart, 500)
    // this.updateChart()
  },
  beforeDestroy() {
    clearInterval(this.timeer)
  },
  methods: {
    resizeChart() {
      if (this.chart) {
        this.chart.resize()
      }
    },
    updateChart() {
      if (!this.data) return
      const electricCurrent = {
        name: '电流',
        type: 'line',
        data: [],
        // showSymbol: false
      }
      const frequency = {
        name: '频率',
        type: 'line',
        data: [],
        // showSymbol: false
      }
      const xData = []
      this.data.map(e => {
        electricCurrent.data.push(e.electricCurrent)
        frequency.data.push(e.frequency)
        xData.push(e.createTime)
      })
      console.log(electricCurrent, frequency)
      this.$nextTick(() => {
        if (this.chart) {
          this.chart.setOption({
            xAxis: {
              data: xData
            },
            series: [electricCurrent, frequency]
          })
        } else {
          // setTimeout(() => {
          //   if (count < 3) {
          //     this.updateChart()
          //   }
          //   count ++
          // }, 10)
        }
      })
    },
    initChart() {
      const option = {
        colors: ['#2FC25B', '#1890FF'],
        grid: {
          top: 40,
          left: 20,
          right: 20,
          bottom: 20,
          containLabel: true
        },
        legend: {
          show: true,
          right: 30,
          top: 16
        //   textStyle: {
        //     color: '#00BCFF'
        //   }
        },
        xAxis: {
          z: 4,
          type: 'category',
          boundaryGap: false
          // axisLine: {
          //   lineStyle: {
          //     color: '#00BCFF'
          //   }
          // }
        },
        yAxis: {
          type: 'value',
          //   axisLabel: {
          //     color: '#00F6FF'
          //   },
          splitLine: {
            show: false
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: [
        ]
      }
      const myChart = echarts.init(this.$refs.chart)
      this.chart = myChart
      myChart.setOption(option)
    }
  }
}
</script>

        <style>
        </style>

